import React, { Component } from 'react';
import { connect } from 'dva';
import { Select } from 'antd';
const Option = Select.Option;

const sty = {
	select: {
		width: '180px'
	}
};

class ProductSelect extends Component {

	componentWillMount() {
		const { productList, dispatch } = this.props;
		if (!productList || !productList.length) {
			dispatch({
				type: 'productList/query'
			});
		}
	}

	render() {
		const { productList, productId, dispatch } = this.props;
		const list = productList;
		return (
			<div>
				<label>选择产品：</label>
				<Select
					value={productId}
					onChange={v => dispatch({ type: 'app/set', productId: v })}
					style={sty.select}
					getPopupContainer={triggerNode => triggerNode.parentNode}
				>
					{list.map(p => <Option key={p.id} value={p.id}>{p.name}</Option>)}
				</Select>
			</div>
		);
	}
}

export default connect(state => ({
	productList: state.productList.list,
	productId: state.app.productId
}))(ProductSelect);
